﻿import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

//Item用于划分区域（无颜色），当其中控件有共同的位置属性时，可以使用
//Rectangle用于划分区域，当有背景色需求可以使用。
//Margin属性使用前，必须已经设定对齐方式（上、下、左、右、上下居中、左右居中、fill）
//习惯的属性顺序：id、文本内容、尺寸颜色字体、...、位置

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("My To Do List")

    ListModel{
        id: todoModel
    }
        
    Rectangle{
        id: topRect
        width: parent.width
        height: 100
        color: "#721F1F"
        anchors.top: parent.top
        z: 1    //堆叠属性。负值--被绘制在父类下面。默认0，值越大越在上面。防止列表上下滑动时盖在上面。

        Text {
            text: qsTr("My To Do List")
            font.bold: true
            font.pixelSize: 32
            color: "white"
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 35
        }
    }

    Rectangle{
        width: 0.5*parent.width
        height: parent.height
        color: "#C4C4C4"
        anchors.top: topRect.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left

        ListView{
            id: listView
            model: todoModel
            //model: 5                 //5个条目。
            width: parent.width*0.7
            height: parent.height*0.8
            spacing: 5
            anchors.centerIn: parent
            delegate: Rectangle{    //委托。将model提供的条目展示到此Rectangle里
            //Rectangle{                //如果想看样式，注释掉上一行，启用此行。
                id: dlg
                width: parent.width
                height: 100
                color: "white"
                radius: 10

                property string title: _title   //自定义属性
                property string description: _des
//DELETE，在Rectangle的右侧。有鼠标事件。
                Rectangle{
                    width: 100
                    height: parent.height
                    radius: 10
                    color: "red"
                    anchors.right: parent.right //右侧

                    Text {
                        text: qsTr("DELETE")
                        color: "white"
                        font.bold: true
                        font.pixelSize: 18
                        anchors.centerIn: parent  //Text在Rectangle里上下左右居中
                    }

                    MouseArea{
                        anchors.fill: parent    //它的父类就是{}它的Rectangle。范围是整个Rectangle
                        onClicked: {
                            todoModel.remove(index)
                        }
                    }
                }
//列布局
                Column{
                    anchors.fill: parent
                    anchors.leftMargin: 20
                    anchors.rightMargin: 100
                    anchors.topMargin: 5
                    anchors.bottomMargin: 5

                    Text {
                        text: dlg.title         //使用自定义的属性
                        //text: qsTr("Title")
                        color: "black"
                        font.bold: true
                        font.pixelSize: 18
                    }
                    Text {
                        text: dlg.description   //使用自定义的属性
                        //text: qsTr("Description")
                        color: "black"
                        font.pixelSize: 16
                    }
                }
            }
        }
    }
    Item {
        id: rightItem
        width: 0.5*parent.width
        anchors.top: topRect.bottom
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        //列布局
        ColumnLayout{
            width: 0.8*parent.width
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            spacing: 10
            anchors.horizontalCenter: parent.horizontalCenter

            TextField{
                id: t1
                Layout.preferredHeight: 50
                placeholderText: "Enter the title"
                Layout.fillWidth: true
                color: "black"
                leftPadding: 7
            }

            TextArea{
                id: t2
                placeholderText: "Enter the To Do item description"
                Layout.fillWidth: true
                Layout.fillHeight: true
                leftPadding: 7
            }

            Button{
                id: button
                text: "ADD"
                Layout.fillWidth: true
                Layout.preferredHeight: 50

                onClicked: {
                    todoModel.append({"_title":t1.text,"_des":t2.text})
                    t1.text=""
                    t2.text=""
                }
            }
        }
    }
}
